<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views-jsp/include/taglib/taglib.jsp" %>
<%@ include file="/WEB-INF/views-jsp/include/script/script.jsp" %>
<%@ include file="/WEB-INF/views-jsp/include/link/link.jsp" %>
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="${path}/html/js/js-resource/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${path}/html/js/js-resource/calendar/css/calendar.css">
    <link rel="stylesheet" href="${path}/html/js/js-jsp/wo/attend/css/attendanceStatistics.css">
    <link rel="stylesheet" type="text/css" href="${path}/html/css/jquery.loadmask.css" />
    <script type="text/javascript" src="${path}/html/js/js-resource/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="${path}/html/js/js-resource/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="${path}/html/js/js-resource/calendar/js/calendar.js?v=<%out.print(Math.random());%>"></script>
    <%--<script type="text/javascript" src="${path}/html/js/js-jsp/wo/attend/js/attendanceDetail.js?v=<%out.print(Math.random());%>"></script>--%>
    <script type="text/javascript" src="${path}/html/js/js-resource/jstimezonedetect/jstz.min.js"></script>
    <script type="text/javascript" src="${path}/html/js/js-resource/calendar/js/language/zh-CN.js"></script>
    <script language="javascript" src="${path}/html/js/js-jsp/jquery.loadmask.js"></script>
    <script type="text/javascript">
        $(function(){
            var timeDate = [{id:"2018-09-12",title:"补卡",class: "event-warning",start:"1535932800000",end:"1535968800000"}];
            <c:forEach items="${timeList}" var="attendTime">
            var obj = {};
            obj["id"] = '${attendTime.id}';
            obj["title"] = '${attendTime.title}';
            obj["class"] = '${attendTime.classTemp}';
            obj["start"] = '${attendTime.start}';
            obj["end"] = '${attendTime.end}';
            timeDate.push(obj)
            </c:forEach>
            var calendar = $('#calendar').calendar({
                tmpl_path: '../html/js/js-resource/calendar/tmpls/',
                language: 'zh-CN',
                events_source: timeDate
            });
            $('#calendar').data("calendar", calendar);
        });
    </script>
</head>
<body style="height: 100%">
    <div class="place">
        <span>当前位置：</span>
        <ul class="placeul" style="margin-bottom: 0px">
            <li><a href="${path}/attend/index.do" class="easyui-linkbutton" data-options="iconCls:'icon_dept_watch_right'"
                   style="background: transparent; border: none">人员考勤</a></li>
            <li><a class="easyui-linkbutton" data-options="iconCls:'icon-add'"
                   style="background: transparent; border: none">考勤详情</a></li>
        </ul>
    </div>
    <input type="hidden" id="idCard_" value="${workerInfo.idCard}">
    <input type="hidden" id="projectId_" value="${workerInfo.projectId}">
    <div id="cc" class="easyui-layout" style="width:100%;height:100%;">
        <div id="eastPanel_" data-options="region:'east',collapsed:false,title:'补卡详情'" style="width:200px;">
            <div>
                <p style="font-size: 15px" id="repName">
                    姓名：
                </p>
                <p style="font-size: 15px" id="repIdCard">
                    身份证号：
                </p>
                <p style="font-size: 15px" id="repDate">
                    补卡日期：
                </p>
                <p style="font-size: 15px" id="repStartDate">
                    补卡开始时间：12:12:12
                </p>
                <p style="font-size: 15px" id="repEndDate">
                    补卡结束时间：
                </p>
                <p style="font-size: 15px" id="repReason">
                    补卡原因：
                </p>
                <p style="font-size: 15px" id="repPerson">
                    补卡人：
                </p>
                <p style="font-size: 15px" id="repTime">
                    补卡时间：
                </p>
            </div>
        </div>
        <div data-options="region:'center'" style="padding:5px;">
            <div style="margin-left:5%;">
                <p style="font-size: 22px">
                        <span style="float:left">
                            <img src="${path}/html/images/person.png" width="30px" height="30px">
                        </span>
                    <span style="float:left;font-size:20px">
                        ${workerInfo.name}
                    </span>
                    <span style="margin-left:10%;float:left;font-size: 20px">
                        ${workerInfo.idCard}
                    </span>
                    <span style="margin-left:10%;float:left;font-size: 20px">
                           ${workerInfo.createdAt}加入项目
                        </span>
                    <span style="margin-left:10%;float:left;font-size: 20px">
                            <c:if test="${workerInfo.deleted == 0}">
                                <img src="${path}/html/images/right.png" width="25px" height="25px"/>&nbsp;&nbsp;在职
                            </c:if>
                            <c:if test="${workerInfo.deleted == 1}">
                                <img src="${path}/html/images/error.png" width="25px" height="25px"/>&nbsp;&nbsp;离职
                            </c:if>
                        </span>
                </p>
            </div>
            <div style="margin-left:25%;font-size: 18px;clear: both">
                <p>
                    <span style="float:left">
                        <img src="${path}/html/images/leftArrow.png" onclick="arrowClick('left')"  width="25px" height="25px"/>
                    </span>
                    <span style="margin-left:20%;float:left;font-size: 20px" id="month_">
                        ${currentMonth}
                    </span>
                    <span style="margin-left:20%;float:left">
                        <img src="${path}/html/images/rightArrow.png" onclick="arrowClick('right')" width="25px" height="25px"/>
                    </span>
                </p>
            </div>
            <div style="width:100%;font-size:16px;clear:both">
                <div style="float:left;margin-left:20%;margin-top:10px">
                    <time class="icon">
                        <em>小时</em>
                        <strong>累计出勤工时</strong>
                        <span id="totalAttendLength_">${totalAttendLength}</span>
                    </time>
                </div>
                <div style="float:left;margin-left:15%;margin-top:10px">
                    <time class="icon">
                        <em>天</em>
                        <strong>出勤天数</strong>
                        <span id="workerDays_">${workerDays}</span>
                    </time>
                </div>
                <div style="float:left;margin-left:17%;margin-top:10px">
                    <time class="icon">
                        <em>天</em>
                        <strong>补卡天数</strong>
                        <span id="supplementCard_">${supplementCard}</span>
                    </time>
                </div>
            </div>
            <div style="margin-left:62%;clear:both">
                <div style="float:left">
                    <p class="onTheJob">●</p>
                </div>
                <div style="float:left">
                    <p style="margin-left:10px;margin-top:15px">出勤</p>
                </div>
                <div style="float:left">
                    <p class="quitTheJob">●</p>
                </div>
                <div style="float:left">
                    <p style="margin-left:10px;margin-top:15px">补卡</p>
                </div>
            </div>
            <div id="calendar"></div>
            <div border="false" style="padding: 1px;margin-top:15px">
                <iframe id="attendDetail-dataList" frameborder="0" scrolling="yes" style="width:100%; height:100%; overflow: hidden;"></iframe>
            </div>
        </div>
    </div>
    <div class="forMask">
    </div>
</body>
</html>
